<!-- eslint-disable import/no-cycle -->
<template>
  <div>
    <!-- <ProfilePage /> -->
    <div class="myOrder">
      <div class="title">
        <h2>我的订单</h2>
      </div>
      <div class="nav">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部订单" name="0"></el-tab-pane>
          <el-tab-pane label="待付款" name="1"></el-tab-pane>
          <el-tab-pane label="待审核" name="2"></el-tab-pane>
          <el-tab-pane label="待发货" name="3"></el-tab-pane>
          <el-tab-pane label="待收货" name="4"></el-tab-pane>
          <el-tab-pane label="待评价" name="5"></el-tab-pane>
          <el-tab-pane label="已完成" name="6"></el-tab-pane>
          <el-tab-pane label="已驳回" name="7"></el-tab-pane>
          <el-tab-pane label="已取消" name="8"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="search">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="输入订单号进行搜索"
          class="inp"
        />
        <button class="btn" @click="searchList">订单搜素</button>
      </div>
      <div v-if="orderList.length > 0">
        <div class="content" v-show="orderList.length > 0">
          <div class="tabs">
            <span>商品</span>
            <p></p>
            <span>订单价格</span>
            <p></p>
            <span>数量</span>
            <p></p>
            <span>实付款</span>
            <p></p>
            <span>交易状态</span>
            <p></p>
            <span>交易操作</span>
          </div>

          <div v-for="(item, index) in orderList" :key="index">
            <div class="shops">
              <div class="shops_header">
                <p>订单号: {{ item.orderCode }}</p>
                <p>店铺: {{ item.mallName }}</p>
              </div>
              <div class="shops_main">
                <span class="shops_main_1">
                  <img
                    :src="item.orderDetailesList[0].goodsThumbnail"
                    alt=""
                    style="width: 80px; height: 80px"
                  />
                  <p>{{ item.orderDetailesList[0].goodsName }}</p>
                </span>
                <span class="shops_main_2">
                  <p style="margin-right: 10px">
                    ￥{{ item.payableAmount / 100 }}
                  </p>
                </span>
                <span class="shops_main_3">
                  <p style="margin-right: 10px">{{ item.goodsAmount }}</p>
                </span>
                <span class="shops_main_5">
                  <p>￥{{ item.paidAmount / 100 }}</p>
                  <p style="font-size: 14px; color: #707070">(含运费:￥0.00)</p>
                </span>
                <span class="shops_main_6">
                  <div
                    style="
                      width: 80%;
                      height: 100%;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                    "
                  >
                    <p class="state">
                      {{
                        item.orderStatus == 1
                          ? "待付款"
                          : item.orderStatus == 2
                          ? "待审核"
                          : item.orderStatus == 3
                          ? "待发货"
                          : item.orderStatus == 4
                          ? "待收货"
                          : item.orderStatus == 5
                          ? "待评价"
                          : item.orderStatus == 6
                          ? "已完成"
                          : item.orderStatus == 7
                          ? "已驳回"
                          : item.orderStatus == 8
                          ? "已取消"
                          : ""
                      }}
                    </p>
                    <p
                      class="details"
                      style="cursor: pointer"
                      @click="goDetails(item)"
                    >
                      订单详情
                    </p>
                  </div>
                </span>
                <span class="shops_main_7">
                  <template>
                    <button
                      class="order-item"
                      v-if="[7, 8].includes(item.orderStatus)"
                    >
                      无
                    </button>
                    <button
                      v-if="item.orderStatus == 1"
                      @click="toPay(item)"
                      class="order-item"
                    >
                      去支付
                    </button>
                    <button
                      class="order-item"
                      v-if="[1, 2, 3].includes(item.orderStatus)"
                      @click="putOrderStatus(item)"
                    >
                      取消订单
                    </button>
                    <button
                      class="order-item"
                      v-if="item.orderStatus == 4"
                      @click="confirmReceipt(item)"
                    >
                      确认收货
                    </button>
                    <button
                      v-if="[4, 5, 6].includes(item.orderStatus)"
                      class="order-item"
                    >
                      物流信息
                    </button>
                    <button
                      class="order-item"
                      @click="toEvaluate(item)"
                      v-if="item.orderStatus == 5"
                    >
                      去评价
                    </button>
                    <button
                      class="order-item"
                      v-if="[3, 4, 5].includes(item.orderStatus)"
                      @click="refund(item)"
                    >
                      退货退款
                    </button>
                  </template>
                </span>
              </div>
            </div>
          </div>

          <el-pagination
            :page-size="pagination.pageSize"
            :current-page.sync="pagination.pageNo"
            layout="prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <div class="wrap" v-if="orderList.length == 0" v-show="loading">
        <div class="bomContent">
          <img
            alt=""
            height="330px"
            src="../../../../public/images/74.png"
            srcset=""
            width="330px"
          />
          <p>订单空空如也！</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMyOrder, updateStatus } from "@/api/myOrder/myOrder";

export default {
  name: "MyOrder",
  components: {},
  data() {
    return {
      loading: true,
      activeName: 0,
      checked: true,
      dialogVisible: false,
      dialogVisible_two: false,
      orderList: [],
      detailsList: [],
      filterList: [],
      goodsName: "",
      goodsThumbnail: "",
      id: "",
      orderCode: "",
      searchQuery: "",
      buyerMessage: "",
      pagination: {
        pageNo: 1,
        pageSize: 3,
        total: 0,
      },
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.getOrderList();
  },
  methods: {
    toPay(item) {
      this.$router.push({
        path: "/mall/confirmAnOrder",
        query: { subtotal: item.paidAmount },
      });
    },
    refund(item) {
      this.$router.push({
        path: "/mall/refund",
        query: { orderCode: item.orderCode },
      });
    },
    handleClick() {
      this.orderList = [];
      this.pagination.pageNo = 1;
      this.getOrderList();
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getOrderList();
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val;
      this.getOrderList();
    },
    // 获取订单商品数据
    getOrderList() {
      this.loading = false;
      getMyOrder({
        pageNum: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        type: 1,
        isPage: 1,
        orderStatus: this.activeName,
        orderCode: this.searchQuery,
        buyerMessage: this.buyerMessage,
      }).then((res) => {
        this.loading = true;
        this.orderList = res.data.list;
        this.pagination.total = Number(res.data.total);
        this.detailsList = res.data.list[0].orderDetailesList;
        // eslint-disable-next-line array-callback-return
        this.detailsList.filter((item) => {
          this.goodsName = item.goodsName;
          this.goodsThumbnail = item.goodsThumbnail;
        });
      });
    },
    // 跳订单详情
    goDetails(item) {
      this.$router.push({
        path: "/mall/orderdetails",
        query: {
          item: item.orderCode,
          id: item.id,
          buyerMessage: item.buyerMessage,
        },
      });
    },
    // 确认修改订单状态弹框
    putOrderStatus(item) {
      this.$confirm("是否确认取消订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("item", item);
          const data = {
            id: item.id,
            orderStatus: 8,
          };
          updateStatus(data).then((res) => {
            if (res.code !== "00000") return;
            this.getOrderList();
            this.$message({
              type: "success",
            message: "订单取消成功",
            })
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    // 确认收货订单状态更改
    confirmReceipt(item) {
      this.$confirm("是否确认取消订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("item", item);
          const data = {
            id: item.id,
            orderStatus: 5,
          };
          updateStatus(data).then((res) => {
            if (res.code !== "00000") return;
            this.getOrderList();
            this.$message({
              type: "success",
            message: "确认收货成功",
            })
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    // 搜索
    searchList() {
      this.filterList = this.orderList.filter((item) => {
        return item.orderCode.includes(this.searchQuery);
      });
      this.getOrderList();
    },
    //去评价
    toEvaluate(item) {
      this.$router.push({
        path: "/mall/profile/evaluationOrder",
        query: {
          orderCode: item.orderCode,
          id: item.id,
          mallCode: item.mallCode,
        },
      });
    },
    getButton() {
      const orderItems = document.querySelectorAll(".order-item");
      orderItems.forEach((orderItem) => {
        const status = orderItem.getOrderList("orderStatus");
        const actionButtonsDiv = orderItem.querySelector(".action-buttons");
        // const buttons = getButtonsForStatus(status);

        // 清空旧的按钮
        actionButtonsDiv.innerHTML = "";

        // 为每个按钮创建元素并添加到actionButtonsDiv中
        // status.forEach((buttonText) => {
        //   const button = document.createElement("button");
        //   button.className = "action-button";
        //   button.textContent = buttonText;
        //   actionButtonsDiv.appendChild(button);
        // });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.myOrder {
  list-style: none;
  box-sizing: border-box;
  width: 1010px;
  height: auto;
  background: #fff;

  .title {
    width: 100%;
    height: 62px;
    line-height: 62px;
    border-bottom: 1px solid #ccc;
  }

  .nav {
    width: 95%;
    height: 62px;
  }

  .search {
    margin-top: 18px;

    .inp {
      width: 421px;
      height: 36px;
      padding-left: 17px;
      border-radius: 4px;
      border: 1.5px solid #e5e5e5;
      outline: none;
    }

    .btn {
      width: 95px;
      height: 36px;
      background: #f0f0f0;
      border: none;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      color: #3c3c3c;
      margin-left: -95px;
    }
  }

  .tabs {
    margin-top: 17px;
    width: 968px;
    height: 48px;
    background: #f8f8f8;
    border: 1px solid #efefef;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: #2b2b2b;

    p {
      display: inline-block;
      width: 1px;
      height: 20px;
      background: #ccc;
      margin: auto;
    }

    :nth-child(1) {
      display: inline-block;
      width: 340px;
      height: 48px;
      line-height: 48px;
      text-align: center;
    }

    :nth-child(3) {
      display: inline-block;
      width: 120px;
      height: 48px;
      line-height: 48px;
      text-align: center;
    }

    :nth-child(5) {
      display: inline-block;
      width: 100px;
      height: 48px;
      line-height: 48px;
      text-align: center;
    }

    :nth-child(7) {
      display: inline-block;
      width: 145px;
      height: 48px;
      line-height: 48px;
      text-align: center;
    }

    :nth-child(9) {
      display: inline-block;
      width: 125px;
      height: 48px;
      line-height: 48px;
      text-align: center;
    }

    :nth-child(11) {
      display: inline-block;
      width: 100px;
      height: 48px;
      line-height: 48px;
      text-align: center;
    }
  }

  .shops {
    width: 969px;
    height: 170px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #e2e2e2;
    margin-bottom: 20px;

    .shops_header {
      width: 100%;
      height: 44px;
      background: #f8f8f8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      padding: 0 10px;

      :nth-child(2) {
        margin-right: 370px;
      }
    }

    .shops_main {
      width: 100%;
      height: 125px;
      display: flex;
      justify-content: space-around;
      margin: auto;

      .shops_main_1 {
        width: 333px;
        height: 125px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        p {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          max-height: 3.6em; /* 设置最大高度 */
          // white-space: wrap;
          max-width: 80px; /* 设置最大宽度 */
        }
      }

      .shops_main_2 {
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #000000;
        font-weight: 700;
      }

      .shops_main_3 {
        width: 80px;
        height: 125px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .shops_main_5 {
        width: 120px;
        height: 125px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        :nth-child(1) {
          font-size: 16px;
          color: #000000;
          font-weight: 700;
        }

        :nth-child(2) {
          margin-top: -10px;
        }
      }

      .shops_main_6 {
        width: 100px;
        height: 125px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .state {
          font-size: 14px;
          text-align: center;
          margin-left: -25px;
        }
        .details {
          font-size: 14px;
          color: #1289ff;
        }
      }

      .shops_main_7 {
        width: 100px;
        height: 125px;
        margin-left: -5px;
        border-right: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        button {
          width: 72px;
          height: 25px;
          font-size: 14px;
          cursor: pointer;
          background: #1289ff;
          color: #fff;
          border: none;
          border-radius: 5px;
        }
        ::v-deep .footerButton {
          width: 72px;
          height: auto;
        }
      }

      span {
        border-right: 1px solid #ccc;
      }
    }
  }
}

.bomContent {
  width: 600px;
  height: 530px;
  margin: 0 auto;

  p {
    margin-left: 110px;
  }
}
</style>
